import { ContacCiieDetail, Log } from '@/api/index'
import Fog from '@/assets/fog.png'
import FogBg from '@/assets/fog-bg.jpg'
import FogDesc from '@/assets/fog-desc.png'

import FogK from '@/assets/fog-k.png'
import Haze from '@/assets/haze.png'
import HazeBg from '@/assets/haze-bg.jpg'

import HazeDesc from '@/assets/haze-desc.png'
import HazeK from '@/assets/haze-k.png'
import Kang from '@/assets/kang-4.png'
import Logo from '@/assets/logo.png'

import OvercastIcon from '@/assets/overcast.png'
import OvercastBg from '@/assets/overcast-bg.jpg'
import OvercastDesc from '@/assets/overcast-desc.png'
import OvercastK from '@/assets/overcast-k.png'

import Rain from '@/assets/rain.png'
import RainBg from '@/assets/rain-bg.jpg'
import RainDesc from '@/assets/rain-desc.png'
import RainK from '@/assets/rain-k.png'

import Button from '@/assets/result-1.png'

import ValuesBg from '@/assets/result-3.png'
import Sand from '@/assets/sand.png'
import SandBg from '@/assets/sand-bg.jpg'
import SandDesc from '@/assets/sand-desc.png'

import SandK from '@/assets/sand-k.png'
import Snow from '@/assets/snow.png'
import SnowBg from '@/assets/snow-bg.jpg'
import SnowDesc from '@/assets/snow-desc.png'

import SnowK from '@/assets/snow-k.png'
import Sun from '@/assets/sun.png'
import SunBg from '@/assets/sun-bg.jpg'
import SunDesc from '@/assets/sun-desc.png'

import SunK from '@/assets/sun-k.png'
import { XyzTransitionGroup } from '@animxyz/react'
import { useCountDown } from 'ahooks'
import ClassNames from 'classnames'

import { useEffect, useMemo } from 'react'

import { history, useQuery, useSearchParams } from 'umi'
import '@animxyz/core'

const ResultMap = {
  sunny: {
    icon: Sun,
    bg: SunBg,
    k: SunK,
    desc: SunDesc,
  }, // 晴
  overcast: {
    icon: OvercastIcon,
    bg: OvercastBg,
    k: OvercastK,
    desc: OvercastDesc,
  }, // 阴
  rain: {
    icon: Rain,
    bg: RainBg,
    k: RainK,
    desc: RainDesc,
  }, // 雨
  snow: {
    icon: Snow,
    bg: SnowBg,
    k: SnowK,
    desc: SnowDesc,
  }, // 雪
  haze: {
    icon: Haze,
    bg: HazeBg,
    k: HazeK,
    desc: HazeDesc,
  }, // 霾
  fog: {
    icon: Fog,
    bg: FogBg,
    k: FogK,
    desc: FogDesc,
  }, // 雾
  sand: {
    icon: Sand,
    bg: SandBg,
    k: SandK,
    desc: SandDesc,
  }, // 沙尘
}

export default function ResultPage() {
  // ?获取URL上的ID
  const [searchParams] = useSearchParams()
  const id = searchParams.get('id')
  const city = searchParams.get('city')
  const code = searchParams.get('code')

  console.log('city lenfth is --', city?.length)

  // #查询天气结果
  const { data: detail } = useQuery({
    enabled: !!id,
    queryKey: ['contac-ciie/detail'],
    queryFn: () => ContacCiieDetail({
      id: id!,
    }),
  })

  const result = useMemo(() => detail?.result && JSON.parse(detail?.result), [detail])
  const resultKey = useMemo(() => code || result?.code, [result, code])
  const curResult = useMemo(() => resultKey && ResultMap[resultKey as keyof typeof ResultMap], [resultKey])

  const [countdown] = useCountDown({
    leftTime: 15 * 1000,
    onEnd() {
      history.replace('/')
    },
  })

  useEffect(() => {
    Log({ eventName: '111' })
  }, [])
  return (
    <XyzTransitionGroup
      appear
      appearVisible
      duration="auto"
      xyz="fade small-4 appear-stagger"
      className="min-h-screen pt-12 bg-cover"
      style={{ backgroundImage: `url(${curResult?.bg})` }}
    >
      <div style={{ backgroundImage: `url(${curResult?.k})` }} className=" bg-cover w-[976px] h-[1208px] shadow-2xl mx-auto pt-[80px] px-[80px] relative flex flex-col items-end justify-end pb-[80px]">

        {/* logo */}
        <p className="w-[390px] h-[130px] bg-contain mx-auto block absolute  left-1/2 -translate-x-1/2 top-[100px]" style={{ backgroundImage: `url(${Logo})` }}></p>

        <h2 className={ClassNames('leading-none text-white font-bold text-right drop-shadow-[0_10px_10px_rgba(0,0,0,0.2)] text-[100px]')}>
          {city}
        </h2>
        <p className=" text-[60px] text-white text-right mt-4 drop-shadow-[0_5px_5px_rgba(0,0,0,0.2)]">{result?.time || '--'}</p>
        <img src={curResult?.icon} className="h-[220px] w-[auto] block ml-auto mt-[40px]" alt="" />

        <div className="w-[456px] h-[208px] font-bold bg-cover ml-auto mt-[30px] leading-none text-primary relative" style={{ backgroundImage: `url(${ValuesBg})` }}>
          <p className="text-[48px] flex items-start absolute left-[50px] top-[6px]">
            {result?.max}
            <span className="text-3xl">℃</span>
          </p>
          <p className="text-[48px] flex items-start absolute left-[310px] top-[6px]">
            {result?.min}
            <span className="text-3xl">℃</span>
          </p>

          <p className=" text-[40px] absolute  w-[130px] left-[90px] top-[148px]">
            {result?.cold}
          </p>
          <p className=" text-[40px] absolute left-[350px] top-[148px] w-[130px]">{result?.allergy}</p>
        </div>
      </div>

      <div className="relative flex justify-end pr-[44px] mt-[60px]">
        <img src={Kang} className="w-[510px] h-[716px] bg-cover absolute left-[20px] -top-[400px]" style={{ backgroundImage: `url(${Kang})` }}></img>
        <img src={curResult?.desc} className="w-[600px] block" alt="" />
      </div>

      <button
        onClick={() => {
          Log({ eventName: '点击再次测试' })
          history.replace('/form')
        }}
        type="button"
        className="w-[670px] h-[150px] bg-cover active:scale-95 transition-all mx-auto mt-[44px] relative block"
        style={{ backgroundImage: `url(${Button})` }}
      >
      </button>
      <p className="mt-4 text-[30px] text-center text-primary">
        {Math.round(countdown / 1000)}
        后自动返回首页
      </p>
    </XyzTransitionGroup>
  )
}
